<template>
  <div class="box">
    <div class="title">TODO LIST</div>
    <todo-input @add="addNew" />
    <todo-list :list="list" @update-row="updateRow" @delete-row="deleteRow" @switch-row="switchRow" />
  </div>
</template>

<script>
import { deepClone } from "@/utils";
import todoInput from "./components/todoInput";
import todoList from "./components/todoList";

export default {
  name: "App",
  data() {
    return {
      list: [],
    };
  },
  components: {
    todoInput,
    todoList,
  },
  watch: {},
  methods: {
    addNew(value, time) {
      const data = {
        id: time,
        value,
        status: 1, // 0在执行 1待执行 2已完成
        created: time,
        finished: null,
      };
      // 判断是否存在正在执行
      const inx = this.list.length && !this.list[0].status;
      this.list.splice(inx, 0, data);
    },
    // 更新
    updateRow(inx, status) {
      switch (status) {
        case 0:
          this.toDoing(inx);
          break;
        case 1:
          this.list[inx].status = 1;
          break;
        case 2:
          this.toFinish(inx);
          break;
      }
    },
    // 去执行
    toDoing(inx) {
      // transition-group 旧逻辑存在未知bug
      // 解决办法：先修改位置 等位置移动的动画结束后 再修改值
      const cur = this.list.splice(inx, 1)[0];
      this.list.unshift(cur);
      this.$nextTick(() => {
        this.list[0].status = 0;
        // 如果已经存在正在执行的
        if (this.list.length >= 2 && !this.list[1].status) this.list[1].status = 1;
      });
    },
    // 完成
    toFinish(inx) {
      const isFinishedNum = this.list.filter(({ status }) => status == 2).length;
      this.list[inx].status = 2;
      // 修改位置 判断已完成个数 放在最前面
      const cur = this.list.splice(inx, 1)[0];
      if (!isFinishedNum) {
        this.list.push(cur);
      } else {
        this.list.splice(-isFinishedNum, 0, cur);
      }
    },
    // 删除
    deleteRow(inx) {
      this.list.splice(inx, 1);
    },
    // 当前对象移动到目标对象
    switchRow(current, target) {
      const list = deepClone(this.list);
      list.splice(target, 0, ...list.splice(current, 1));
      this.list = list;
    },
    // 存储数据
    handleBeforeunload() {
      sessionStorage.setItem("todoList", JSON.stringify(this.list));
    },
  },
  // 监听页面刷新
  created() {
    let list = JSON.parse(sessionStorage.getItem("todoList"));
    this.list = list?.length ? list : [];
    window.addEventListener("beforeunload", this.handleBeforeunload);
  },
  destroyed() {
    window.removeEventListener("beforeunload", this.handleBeforeunload);
  },
  // 用sessionstorage存储数据
  beforeDestroy() {
    this.handleBeforeunload();
  },
};
</script>

<style scoped>
.box {
  width: 600px;
  color: #666;
}
.title {
  font-size: 40px;
  font-weight: 600;
  color: #666;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}
.title::after {
  content: "PC端支持拖拽换位";
  position: absolute;
  color: #95a5a6;
  font-size: 0.35em;
  font-weight: 500;
  font-style: italic;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .box {
    width: 100vw;
  }
  .title {
    font-size: 30px;
  }
  .title::after {
    content: "移动端暂未支持拖拽功能";
  }
}
</style>
